<template>
    <div class="nav">
        <ul>
            <li>
                <router-link to='/booklist' class="li">
                    <div class="svgbox">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shu1"></use>
                        </svg>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to='/index' class="li">
                    <div class="svgbox">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuji"></use>
                    </svg></div>
                </router-link>
            </li>
            <li>
                <router-link to='/center' class="li">
                    <div class="svgbox">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-geren"></use>
                    </svg></div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<style lang="less" scoped>
@import '../other/all.less';
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
//   overflow: hidden;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul{
    display:flex;
    justify-content: space-around;
    background-color: @allcolor4;
    z-index: 100;
    height: 100%;
    position: relative;
    box-shadow: 0px 0px 8px #eee;
}
li{
    height: 100%;
}
.li{
    height: 100%;
    padding: 0px 0.2rem;
    display: inline-block;
    text-decoration: none;
    color: @allcolor1;
    -webkit-tap-highlight-color:transparent; 
    .svgbox{
        margin: 0 auto;
        margin-top: 0.3rem;
        text-align: center;
        svg{
            font-size: 1rem;
            margin: 0 auto;
        }
    }
    .bigsvg{
        margin-top: 1px;
        svg{
            font-size: 2.5rem;
        }
    }
}
.nav{
    width: 100%;
    height: 1.5rem;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
}
</style>
<script>
import "../other/font/iconfont"
export default {
    name:"mynav",
}
</script>